<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子木鱼</title>
    <link rel="icon" href="./img/1.png">
    <style>
        .count{
            color: #fff;
            text-align: center;
            position: relative;
            font-size: 30px;
        }
        @media screen and (max-width:640px) {
            img {
                width: 60%;
            }
        }
        .container{
            width: 100%;
            height: 90vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text {
            position: relative;
        }

        span {
            color: #fff;
            font-size: 20px;
            width: 200px;
            position: absolute;
            top: -120px;
            left: -20px;
            opacity: 0;
            animation: am2 ease-out 1.5s;
        }
        @keyframes am2{
            from{
            opacity: 0;
                transform: translateY(0);
            }
            to{
                transform: translateY(-35px);
                opacity: 1;
            }
        }

        .click {
            animation: am ease 0.5s;
        }

        @keyframes am {
            0% {
                transform: scale(1, 1);
            }

            30% {
                transform: scale(0.98, 0.98);
            }

            60% {
                transform: scale(1.01, 1.01);
            }

            100% {
                transform: scale(1, 1);
            }
        }

        body {
            background-color: black;
            cursor: url(./木棍.ico);
        }
    </style>
</head>

<body>
    <div class="count"></div>
    <div class="container">
        <img src="./img/1.gif" alt="" onclick="knocking()">
        <div class="text"></div>
    </div>
    <script>
        alert("敲电子木鱼，享赛博人生");
        // 次数
        var c = 0;
        // 音频路径
        var audio = new Audio("./img/木鱼.mp3");
        function knocking() {
            muyu(); // 木鱼
            gongde(); // 功德
            sound(); // 声音
            count(1); // 计数
        };
        function muyu() {
            var node = document.querySelector("img");
            if (node.classList.contains("click")) {
                node.classList.remove("click");
                void node.offsetWidth;
                node.classList.add("click");
            } else {
                node.classList.add("click");
            };
        };
        function gongde(){
            var node = document.querySelector(".text");
            var newNode = document.createElement("span");
            newNode.innerHTML="功德+1";
            node.appendChild(newNode);
            setTimeout(function(){
                newNode.remove();
            },2000);
        };
        function sound(){
            if(audio.paused){
                audio.play(); // 直接播放
            }else{
                audio.pause(); // 停止
                audio.currentTime=0;//重置音频速度
                audio.play(); //重新播放
            };
        };
        // 读取次数
        count();
        function count(e=0){
            if(e)c++; // e=0载入页面全局调用，e=1自增1点木鱼调用
            if(window.localStorage){
                if(localStorage.getItem("count")==null){
                    localStorage.setItem("count",0);//初始值
                }else{
                    if(!e){
                        c=localStorage.getItem("count");
                    }else{
                        localStorage.setItem("count",c);
                    };
                };
            };
            var node = document.querySelector(".count");
            node.innerHTML="您的功德"+c;
        };
    </script>
</body>

</html>